<template>
  <n-mention
      :options="widget.options"
      :placeholder="widget.placeholder ? widget.placeholder : '请输入'"
      :size="widget.size ? widget.size : 'medium'"
      :value="result.text"
      @update:value="update"
      :type="widget.type=='input' ? 'text' : 'textarea'"
      :disabled="widget.disabled==true ? true : false"
      :readonly="widget.readonly==true ? true : false"
      @select="select"
    >
    </n-mention>
</template>

<script>
import { ref } from "vue";
export default {
  name: "Mention",
  props: ["value", "widget"],
  setup(props, { emit }) {
    let result = ref({ids:[],text:''})
    if (typeof props.value != 'undefined'){
      const ids = props.value.hasOwnProperty("ids") ? props.value.ids : []
      const text = props.value.hasOwnProperty("ids") ? props.value.text : ""
      result = ref({ids:ids || [],text:text || props.value || ''})
    }
    //选择之后更新ids
    const select = (option,prefix)=>{
      if (result.value.text.indexOf(prefix+option.value)>=0){
        if (option.hasOwnProperty("id")){
          result.value.ids.push(option.id)
        }else{
          result.value.ids.push(option.value)
        }
      }
    }
    //内容发生变动之后触发
    const update = (val)=>{
      result.value.text=val
      emit("update:value",result.value)
    }
    return {result, select, update};
  },
};
</script>

<style lang="less" scoped>
.input-number-pair {
  display: inline-flex;
  align-items: center;
}
.input-number-pair-separator {
  align-items: center;
  border-radius: 0px;
  padding: 0 10px;
}
</style>